<template>
  <Dialog
    v-model="dialogVisible"
    width="80vw"
    maxHeight="70vh"
    :title="t('wholesalOrder.selectShop') + t('order.delivery')"
    :before-close="() => closeDialog()"
  >
    <div>
      <el-table
        class="m-t-10px"
        :data="dataList"
        highlight-current-row
        stripe
        border
        ref="tableRef"
        v-loading="tableLoading"
        row-key="id"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center' }"
        @current-change="handleCurrentChange"
      >
        <el-table-column width="55" align="center">
          <template #default="{ row, $index }">
            <el-radio
              v-model="selectedIndex"
              :label="$index"
              @change="() => handleCurrentChange(row, $index)"
            >
              &nbsp;
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column
          :label="t('wholesalOrder.warehouse')"
          prop="wid"
          min-width="150"
          :show-overflow-tooltip="true"
        >
          <template #default="{ row }">
            {{ useEnumeratePicker(warehouseList, row.wid) }}
          </template>
        </el-table-column>
        <el-table-column
          :label="t('inventory.conversion.availableQuantity')"
          prop="quantity"
          min-width="150"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          :label="t('order.theNumberOfShipments')"
          min-width="150"
          :show-overflow-tooltip="true"
        >
          <template #default="{ row }">
            <el-input-number
              v-model="row.ship_quantity"
              :min="1"
              :max="
                shopInfo.pending_quantity && row.quantity
                  ? Math.min(parseInt(shopInfo.pending_quantity), row.quantity)
                  : 1
              "
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <el-button class="m-r-4" @click="closeDialog()">
        {{ t('system.parameterConfig.cancel') }}
      </el-button>
      <el-button type="primary" @click="submit()">
        {{ t('order.confirm') }}{{ t('order.delivery') }}
      </el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { Dialog } from '@/components/Dialog'
import { useI18n } from '@/hooks/web/useI18n'
import { selectWarehouseProducts } from '@/api/wholesalOrder'
import { useEnumeratePicker } from '@/utils'
import { ElMessageBox } from 'element-plus'
const props = defineProps({
  shopInfo: {
    type: Object,
    default: () => {}
  },
  warehouseList: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['refresh'])
const { t } = useI18n()
const dialogVisible = ref<boolean>(false)
//获取数据
const tableLoading = ref(false)
const dataList = ref([])
const getData = async () => {
  tableLoading.value = true
  const resp = await selectWarehouseProducts({
    id: props.shopInfo.id
  })
  tableLoading.value = false
  if (resp && resp.data) {
    dataList.value = resp.data.flatMap((item) => [{ ...item, ship_quantity: 1 }])
  }
}
//单选
const selectedIndex = ref<number>(-1)
const selectedRow = ref(null)
const handleCurrentChange = (val: any, index: number) => {
  selectedRow.value = val
  selectedIndex.value = index
}
const submit = async () => {
  if (selectedIndex.value === -1) {
    return ElMessage.warning('请勾选仓库信息及填写发货数量')
  }
  ElMessageBox.confirm('确认要发货吗？', '提示', {
    confirmButtonText: `${t('order.confirm')}`,
    cancelButtonText: `${t('system.parameterConfig.cancel')}`,
    type: 'warning'
  })
    .then(() => {
      emit('refresh', { data: selectedRow.value })
      closeDialog()
    })
    .catch(() => {
      console.log('取消')
    })
}
const closeDialog = () => {
  selectedIndex.value = -1 // 重置选择
  selectedRow.value = null
  dialogVisible.value = false
}
defineExpose({
  dialogVisible,
  getData
})
</script>
<style lang="less" scoped></style>
